<template>
	<view class="pronumbox">
		<u-number-box v-model="item.numvalue" min="0" @change="numChange" >
		        <view
		            slot="minus"
		            class="minus numbtn"
								:class="item.numvalue<=0?'none':''"
		        >
		            <u-icon
		                name="minus"
		                size="12"
						color="#bababa"
		            ></u-icon>
		        </view>
		        <text
		            slot="input"
		            class="input"
								:class="item.numvalue<=0?'none':''"
		        >{{item.numvalue}}</text>
		        <view
		            slot="plus"
		            class="plus numbtn"
		        >
		            <u-icon
		                name="plus"
		                color="#f9f9f9"
		                size="12"
						
		            ></u-icon>
		        </view>
		    </u-number-box>
	</view>
</template>

<script>
	import {mapMutations} from "vuex"
	export default {
		name:"pro-num-box",
		data() {
			return {
				value:0,
			};
		},
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		methods:{
			...mapMutations(["setCarList"]),
			numChange(e){
				console.log(e);
				console.log(this.item);
				this.item.add = false
				this.setCarList({item:this.item,num:e.value})
			
			}
		}
	}
</script>

<style lang="scss">
.pronumbox{
	.numbtn{
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.minus{
		border: 1prx solid #ff5521;
		background: #d4d4d4;
	}
		
	.plus{
		background: #ff5521;
	}
	.input{
		width: 60rpx;
		height: 40rpx;
		font-size: 26rpx;
		color: #888;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.none{
		display: none;
	}
}
</style>